<%@page import="org.springframework.web.bind.annotation.RequestMapping"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../laypage/skin/laypage.css"  rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="../js/bootstrap/css/bootstrap-theme.min.css"></script>
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<title>Insert title here</title>
</head>

<body id="tablePage">
 <div >	
		<blockquote>
			<p class="twoType">客户资源管理</p>
		</blockquote> 	
		<hr/>
	     
	<!-- Unnamed (下拉列表框) -->
    <form method="post">
        <table class="table">
		    <tr>
		     <td>客户姓名</td>
		     <td> <input type="text" name="cusName" id="cusName"/> </td>
		    </tr>
		    <tr>
		     <td>联系电话</td>
		     <td> <input type="text" name="cusTel" id="cusTel"/> </td>
		    </tr>		
		    <tr>
		     <td>分配状态：</td>
		     <td> 
                  <select id="cusDistributionState" class="text_sketch" name="cusDistributionState">
                     <option selected value="">不限</option>
                     <option value="null">未分配</option>
                     <option value="+">已分配</option>
                  </select>		     
		      </td>
		    </tr>	
		    <tr><td><input type="button" value="查询" onclick="selectByCondition(1)"></td></tr>		        
		</table> 
    
    </form>

    
	 
  <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  添加
</button>

<!-- Modal：添加用户信息 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">客户资源信息</h4>
      </div>
      <div class="modal-body">
           <form action="" class="form-inline" method="post" id="customer">
	         <table class="table">
	             <tr><th>客户姓名：</th><td class="success"><input type="text" name="cusName"></td></tr>
	             <tr><th>性别：</th>
	             <td>
	             <input type="radio" name="cusSex" value="男">男 
	             <input type="radio" name="cusSex" value="女">女
	             </td>
	             <th>生日：</th><td><input class="Wdate" type="text" name="cusBirth" onClick="WdatePicker({dateFmt:'MM-dd'})"></td>
	             </tr>
	             <tr><th> 类型：</th>
	             <td> <input type="text" list="rank" name="cusRank">
                      <datalist id="rank">
				          <option>普通用户</option>
				          <option>银卡用户</option>
				          <option>金卡用户</option>
				          <option>VIP用户</option>
                      </datalist></td>
                      <th>状态：</th><td><input type="text" list="state" name="cusState">
			          <datalist id="state">
			               <option>启用</option>
			               <option>禁用</option>
			               <option>流失</option>
			          </datalist></td>
                      </tr>
                 <tr><th>手机：</th><td class="success"><input type="text" name="cusTel"></td><th>办公电话：</th><td class="success"><input type="text" name="cusOfficePhone"></td></tr>  
                 <tr><th colspan="2"> 联系地址：</th></tr>
                 <tr><td colspan="4" class="success"><input type="text" name="cusAddress"></td></tr>
                 <tr><th colspan="2">备注信息：</th></tr>  
                 <tr><td colspan="4" class="success"><input type="text" name="cusNote"></td></tr>     
	       </table>
	    </form>
      </div>
      <div class="modal-footer">
		 <button type="button" class="btn btn-default" data-dismiss="modal" >取消添加
		 </button>
		 <button type="button" class="btn btn-primary" onclick="saveCus()">
					保存
		 </button>
	  </div>
   </div>
  </div>
</div>
      
 <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" onclick="getCusMes()">
  修改
</button>

<!-- Modal 修改-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改客户资源信息</h4>
      </div>
      <div class="modal-body">
 
       <form action="" class="form-inline" method="post" id="updateMes">
	    

	         <table class="table">
	             <tr><th>客户ID：</th><td class="success"><input type="text" name="cusId" id="cusId2"></td></tr>
	             <tr><th>客户姓名：</th><td class="success"><input type="text" name="cusName" id="cusName2"></td></tr>
	             <tr><th>性别：</th>
	             <td>
	             <input type="radio" name="cusSex" id="cusSex2" value="男">男 
	             <input type="radio" name="cusSex" id="cusSex2" value="女">女
	             </td>
	             <th>生日：</th><td><input class="Wdate" type="text" name="cusBirth" id="cusBirth2" onClick="WdatePicker({skin:'green',dateFmt:'MM-dd',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})"></td>
	             </tr>
	             <tr><th> 类型：</th>
	             <td> <input type="text" list="rank" name="cusRank" id="cusRank2">
                      <datalist id="rank">
				          <option>普通用户</option>
				          <option>银卡用户</option>
				          <option>金卡用户</option>
				          <option>VIP用户</option>
                      </datalist></td>
                      <th>状态：</th><td><input type="text" list="state" name="cusState" id="cusState2">
			          <datalist id="state">
			               <option>启用</option>
			               <option>禁用</option>
			               <option>流失</option>
			          </datalist></td>
                      </tr>
                 <tr><th>手机：</th><td class="success"><input type="text" name="cusTel" id="cusTel2"></td><th>办公电话：</th><td class="success"><input type="text" name="cusOfficePhone" id="cusOfficePhone2"></td></tr>  
                 <tr><th colspan="2"> 联系地址：</th></tr>
                 <tr><td colspan="4" class="success"><input type="text" name="cusAddress" id="cusAddress2"></td></tr>
                 <tr><th colspan="2">备注信息：</th></tr>  
                 <tr><td colspan="4" class="success"><input type="text" name="cusNote" id="cusNote2"></td></tr>     
	       </table>
	      
	    </form>
      </div>
		<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" >取消添加
				</button>
				<button type="button" class="btn btn-primary" onclick="updateMessage()">
					保存
				</button>
		</div>

    </div>
  </div>
</div>
     
       <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" onclick="showCusMes()">
  查看
</button>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">查看客户资源信息</h4>
      </div>
      <div class="modal-body">
 
       <table>
       <tr><td>客户编码：<span id="cusId1"></span></td><td>客户姓名：<span id="cusName1"></span></td></tr>
       <tr><td>性别：<span id="cusSex1"></span></td><td>生日：<span id="cusBirth1"></span></td></tr>
       <tr><td> 类型：<span id="cusRank1"></span></td><td>状态：<span id="cusState1"></span></td></tr>
       <tr><td>手机：<span id="cusTel1"></span></td><td>办公电话：<span id="cusOfficePhone1"></span></td></tr>
       <tr><td>电子邮箱：<span id="cusMail1"></span></td><td>家庭电话：<span id="cusHomePhone1"></span></td></tr>
       <tr><td>联系地址：<span id="cusAddress1"></span></td></tr>
       <tr><td>备注信息：<span id="cusNote1"></span></td></tr>
       </table> 
	    
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>

  <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3" onclick="distributionMes()" >
  分配
</button>

<!-- Modal 分配-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">机会分配</h4>
      </div>
      <div class="modal-body">
      <table>
      <tr><td>机会名称：</td></tr>
      <tr><td>机会类型：</td><td>机会来源：</td></tr>
      <tr><td>录入人：</td><td>录入时间：</td></tr>
      <tr><td>最后操作人：</td><td>最后修改时间：</td></tr>
      <tr>机会内容：</tr>
      </table>
      <form method="post" id="distribution" id="distribution">
      <input type="text" id="fcusId" name="cusId">
              分配给： 
              <input type="text" list="p1" name="cusDistributionState">
              <datalist id="p1">
               <option>张凯</option>
               <option>刘佳</option>
               <option>金水</option>
               <option>陈璇</option>
              </datalist>

      </form>
      </div>
     
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="updateDistribution()">分配</button>
      </div>
    </div>
  </div>
</div>

	 
	<div class="tableDiv">
		<form action="" >
		<table id="conTable" class="table table-bordered">
		  <thead>
			<tr class="info"><td></td><td></td><td>客户名称</td><td>性别</td><td>类型</td><td>状态</td><td>分配状态</td><td>录入时间</td><td>录入人</td></tr>
		  </thead>
		     
   
		  <tbody id="tcusMes">
		  
		  </tbody>
		  
          <tfoot>
	         <tr><td id="page" colspan="9"></td></tr>
          </tfoot>
		</table>
  
			
	</form>	


</div>

	
</body>
<script type="text/javascript">
$(document).ready(function(){
  //1.加载表格中的信息
    loadComments(1);
  //页面加载事件
    function loadComments(curr) {
	  $.ajax({
		  url:'../customer',
		  type:'post',
		  data:{pageNum:curr},
		  dataType:'json',
		  success: function (result) {

			  $("#tcusMes").empty();

		      //遍历JSON元素，添加到到Tbody  
		    $.each(result.cusList,function(inx,ele){
		    	   $('#tcusMes').append('<tr><td>'+(inx+1)+'</td><td><input type="radio" name="radio" value="'+ele.cusId+'"/></td><td>' + ele.cusName + '</td>' +
		                  '<td>' + ele.cusSex + '</td>'+
		                  '<td>'+ele.cusRank+'</td>'+
		                  '<td>'+ele.cusState+'</td>'+
		                  '<td>'+ele.cusDistributionState+'</td>'+
		                  '<td>'+ele.cusInputTime+'</td>'+
		                  '<td>'+ele.cusInputPerson+'</td></tr>');   
		      })
		   	  	 laypage({
					 cont:'page',//容器
				     pages:result.totalPages, //总页数
				     curr:curr||1,//当前页
				     skin:'molv',//皮肤
				     skip:true,//
				     last:'尾页',//
				     jump:function(obj,first){
				    	
				    	     if(!first){
				    	    	 loadComments(obj.curr);
				    	    	 }
				    	 }
				     
					}) 
		}
	  })	
  }
})

/* 添加客户信息 */
	var saveCus=function(){
		$.ajax({
			url:'../addCustomer',
			type:'post',
			data:$("#customer").serialize(),
			dataType:'json',
			success:function(result){
				alert(result.message);
				window.location.reload(); 
			}
		})
	};

  /*  修改信息 */
	var getCusMes=function(){
	  var cusId=$("input[name='radio']:checked").val();
	  if(cusId!=null){
	  $.ajax({
		  url:'../findCustomer',
		  type:'post',
		  data:{'cusId':cusId},
		  dataType:'json',
		  success:function(map){
			  var result=map.cusMes;
		console.log(result.cusName);
		$('#cusId2').val(result.cusId);
		$("#cusName2").val(result.cusName);
		$("#cusSex2[value='"+result.cusSex+"']").attr('checked','checked');
		$("#cusBirth2").val(result.cusBirth);
		$("#cusState2").val(result.cusState);
		$("#cusRank2").val(result.cusRank);
		$("#cusTel2").val(result.cusTel);
		$("#cusMail2").val(result.cusMail);
		$("#cusAddress2").val(result.cusAddress);
		$("#cusOfficePhone2").val(result.cusOfficePhone);
		$("#cusHomePhone2").val(result.cusHomePhone);
		$("#cusNote2").val(result.cusNote);
		  }
	  })
	  }else{
		  alert("请选择员工");
		  window.location.reload();	
	  }
	}
	
	var updateMessage=function(){
		
		$.ajax({
			url:'../updateCustomer',
			type:'post',
			data:$("#updateMes").serialize(),
			dataType:'json',
			success:function(result){
				alert(result.message);
				window.location.reload();	
			}
		})
	};
	/* 查看信息 */
      var showCusMes=function(){
	  var cusId=$("input[name='radio']:checked").val();
	  console.log(cusId);
	  if(cusId!=null){
	  $.ajax({
		  url:'../findCustomer',
		  type:'post',
		  data:{'cusId':cusId},
		  dataType:'json',
		  success:function(map){
			  var result=map.cusMes;
			  console.log(result.cusId);
			  $('#cusId1').html(result.cusId);
			  $('#cusName1').html(result.cusName);
			  $('#cusSex1').html(result.cusSex);
			  $('#cusBirth1').html(result.cusBirth);
			  $('#cusRank1').html(result.cusRank);
			  $('#cusState1').html(result.cusState);
			  $('#cusTel1').html(result.cusTel);
			  $('#cusOfficePhone1').html(result.cusOfficePhone);
			  $('#cusHomePhone1').html(result.cusHomePhone);
			  $('#cusMail1').html(result.cusMail);
			  $('#cusAddress1').html(result.cusAddress);
			  $('#cusNote1').html(result.cusNote);
		
		  }
	  })
	  }else{
		  alert("请选择员工");
		  window.location.reload();	
	  }
	}
  	/* fenpei信息 */
      var distributionMes=function(){
	  var cusId=$("input[name='radio']:checked").val();
	  console.log(cusId);
	  if(cusId!=null){
	  $.ajax({
		  url:'../findCustomer',
		  type:'post',
		  data:{'cusId':cusId},
		  dataType:'json',
		  success:function(map){
			  var result=map.cusMes;
			  console.log(result.cusId);
			  $('#fcusId').val(result.cusId);
		
		
		  }
	  })
	  }else{
		  alert("请选择员工");
		  window.location.reload();	
	  }
	}
	var updateDistribution=function(){
		
		$.ajax({
			url:'../distribution',
			type:'post',
			data:$("#distribution").serialize(),
			dataType:'json',
			success:function(result){
				alert(result.message);
				window.location.reload();	
			}
		})
	};

	/* 按条件查询 */
	var selectByCondition=function(curr){
			var cusName=$("#cusName").val();
			var cusTel=$("#cusTel").val();
			var cusDistributionState=$("#cusDistributionState").val();
			  $.ajax({
				  url:'../selectList',
				  type:'post',
				  data:{cusName:cusName,cusTel:cusTel,cusDistributionState:cusDistributionState},
				  dataType:'json',
				  success:function (result) { 
					  console.log(result);
					  /* var cusJSON=result.selectList; */
				      //获取tbody标签 并清空标签内容
					  $("#tcusMes").html(""); 
				      //遍历JSON元素，添加到到Tbody
				    $.each(result.selectList,function(inx,ele){
				    	   $('#tcusMes').append('<tr class="active"><td>'+(inx+1)+'</td><td><input type="radio" name="radio" value="'+ele.cusId+'" /></td><td>' + ele.cusName + '</td>' +
				                  '<td>' + ele.cusSex + '</td>'+
				                  '<td>'+ele.cusRank+'</td>'+
				                  '<td>'+ele.cusState+'</td>'+
				                  '<td>'+ele.cusDistributionState+'</td>'+
				                  '<td>'+ele.cusInputTime+'</td>'+
				                  '<td>'+ele.cusInputPerson+'</td></tr>');   
				      }) 

			   	  	 laypage({
						 cont:'page',//容器
					     pages:10, //总页数
					     curr:curr||1,//当前页
					     skin:'molv',//皮肤
					     skip:true,//
					     last:'尾页',//
					     jump:function(obj,first){
				    	     if(!first){
				    	    	 selectByCondition(obj.curr);
			    	    	 }
				    	 }
					}) 
				},
				error:function(result){
					console.log(result);
					alert("error返回方法");
				}
			  })
		}

</script>
</html>